<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>    
    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&hl=en"></script>   
    <style type="text/css">
    .canvas
    {
        width:800px;
        height:600px;   
    }
    .search_div
    {    
        background-color:lightGray;    
    }
    .search_box
    {
        background:url(images/input.png) no-repeat;
        position:absolute;
        height:22px;
        width:202px; 
        z-index:1000;
        display:none;
    }
    .search_input
    {
        position:absolute;
        width:144px;
        height:12px;
        line-height:12px;
        top:3px;
        left:25px; 
        margin:0px;
        border:none;
    }
    .search_images
    {
        width:17px;
        height:12px;
        left:6px;
        position:absolute;  
        top:4px;  
    }
    .left
    {
        left:6px;
    }
    .right
    {
        left:171px;
        width:11px;
        height:11px;
        top:5px;
    }
   	.search_option
   	{
   	    background-color:Red;
   	    display:block;
   		background:url('images/screen-options-toggle.gif') -6px -8px no-repeat;
   		text-indent:-99999em;
        left:186px; 
        width:11px;
        height:11px;
        top:5px; 
   	}
    .map_search_box
    {
        left:100px;
        top:20px;
        display:block;
    }
    body
    {
    padding:0px;
    margin:0px;
   	} 
    .search_type_options
    {
        display:none;
        font-size:small;
        list-style:none;
        padding:0px;
        background-color:lightgray;
        position:absolute;
        width:100px;
        cursor:pointer;
    	padding-left:15px;
    }
   	.search_type_options:hover
   	{
   		display:block;
    }
    .search_type_options li:hover
    {
        background-color:gray;
    }
    .search_type_options li.selected
    {    	
        list-style-type:disc;
    }
    .search_input_cover
    {
    	color:gray;
    }
    </style>
</head>
<body>
    <div>           
        <div class="to_search_box" style="display:none">
            <div class="search_box">
                <img  src="images/loupe_single.png" class="search_images left" alt="search"/>
                <img  src="images/cancel.png" class="search_images search_cancel right" alt="cancel"/>
                <a class="search_images search_option">options</a>                
                <ul class="search_type_options">
                    <li searchtype="name">Name</li>
                    <li searchtype="address">Address</li>
                </ul>
                <input type="text" class="search_input"/>
            </div>
        </div>
        <div class="canvas"></div>
    </div>
    <script type="text/javascript">
        var Address_Cover ="address...";
        var Name_Cover="name...";
        $(document).ready(function () {

			var embed = '<?php echo $_REQUEST['embed']?>';
			var latlngStr = '<?php echo  $_REQUEST['ll']?>';
			var latlngArray = latlngStr.split(',');
			var latlng = new google.maps.LatLng(38.08269, 88.481445);
			if(latlngArray.length==2)
			{
				latlng = new google.maps.LatLng(latlngArray[0], latlngArray[1]);
			}
			var zoomStr = '<?php echo $_REQUEST['z'] ?>';
			if(zoomStr =='')
			{
				zoomStr = '4';
			}
			var zoom  = parseInt(zoomStr);
	        var queryString = '<?php echo $_SERVER['QUERY_STRING'] ?>'+'&output=kml' ;//"ie=UTF8&hl=zh-CN&brcurrent=3,0x31508e64e5c642c1:0x951daa7c349f366f,0%3B5,0,0&msa=0&msid=212800177725253189507.0004a07859593181e6f23&ll=38.08269,98.481445&spn=13.995455,33.815918&z=6";
            var url = "request.php?" + queryString;
			var mapCanvas ='.canvas';
			if(embed=='1')
			{
				var autoResize =function()
				{
					$(mapCanvas).width($(window).width()+"px");
					$(mapCanvas).height($(window).height()+"px");
				};
				autoResize();
				$(window).resize(function(){
					autoResize();
				});
			}
            
            var mapToolkit = new MyMapToolsKit({
                mapCanvas: mapCanvas,
                mapOptions: {
                    zoom: zoom,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: true
                },
                mapSearchBoxOptions: {
                    clone: ".search_box",
                    className: "map_search_box",
                    searchInput: ".search_input",
                    searchCancel: ".search_cancel"
                }
            });
            jQuery.get(url, "", function (data) {
				var xmlDoc = loadXML(data);
                mapToolkit.initialize(xmlDoc);
            }); 
        });

        function MyMapToolsKit(options) {
            this._options = {
                mapCanvas: $(options.mapCanvas),
                mapOptions: options.mapOptions,
                mapSearchBoxOptions: options.mapSearchBoxOptions
            };
            var mapCanvas = this._options.mapCanvas;
            var mapCanvasPosition = mapCanvas.position();
            this._map = null;
            this._map = new google.maps.Map(mapCanvas.get(0), this._options.mapOptions);

            var searchBoxOptions = this._options.mapSearchBoxOptions;
            this._mapSearchBox = $(searchBoxOptions.clone).clone().appendTo(mapCanvas).addClass(searchBoxOptions.className);

            var mapToolkit = this; 
            var seachType = this.searchType();
            this.searchType(seachType);
            
            var searchInputValue = seachType=="address"?Address_Cover:Name_Cover;
            this._mapSearchBox.find(searchBoxOptions.searchInput)
            .attr("value",searchInputValue)
            .addClass("search_input_cover")
            .keydown(function (e) {
                var keyCode = e.keyCode;
                if (keyCode == 13) { 
                	mapToolkit.search($(this).attr('value'));
                    return false;
                }
            })
            .focusin(function(){
				if($(this).hasClass("search_input_cover"))
				{
					$(this).attr("value","");
					$(this).removeClass("search_input_cover");
				}
            })
            .focusout(function(){
                var searchInputValue = mapToolkit.searchType()=="address"?Address_Cover:Name_Cover;
                if($(this).attr("value").trim()==""){
                	$(this).attr("value",searchInputValue);
					$(this).addClass("search_input_cover");
                }
	        });
            var searchbox = this._mapSearchBox;
            this._mapSearchBox.find(searchBoxOptions.searchCancel).click(function () {
                searchbox.find(searchBoxOptions.searchInput).attr('value', '');
                mapToolkit.search('');
            });

            this._mapSearchBox.find('.search_option').click(function(){
               	var position =$(this).position();
				$(this).parent().find('.search_type_options').show()
				.css('left',position.left+'px')
				.css('top',position.top+'px');
            });
 
            this._mapSearchBox.find(".search_type_options li").click(function(){
                var st = $(this).attr("searchtype");
                var searchInputValue = st=="address"?Address_Cover:Name_Cover;
                mapToolkit.searchType(st);
                mapToolkit._mapSearchBox.find(searchBoxOptions.searchInput).attr("value",searchInputValue)
                .addClass("search_input_cover");;
                $(this).parent().hide();
            });
            $(document).click(function(e){
                if(e.target != mapToolkit._mapSearchBox.find('.search_option').get(0))
                {
                	mapToolkit._mapSearchBox.find(".search_type_options").hide();
                }
            });
        }
        MyMapToolsKit.prototype.searchType = function(value) {
            if(value && typeof value == 'string'){
            	jQuery.cookie("searchtype",value);
            	this._mapSearchBox.find(".search_type_options li")
            	.each(function(i,n){
     				if($(n).attr("searchtype")==value){
    					$(n).addClass("selected");
     	 		    }
     				else{
    					$(n).removeClass("selected");
     	 			}
                });
            }
            else{
	            var searchType = jQuery.cookie("searchtype");
	            if (searchType==null || searchType == "") {
	                searchType = "name";
	                this.searchType(searchType);
	            }
	            return searchType;
	        }
        }
        MyMapToolsKit.prototype.initialize = function (data) {
            this._data = data;
            this._markers = [];
            var styles = $(this._data).find("Style");
            var placemarks = $(this._data).find("Placemark");
            this.renderKml(placemarks, styles);
        }
        MyMapToolsKit.prototype.search = function (params) {  
            var allStyles = $(this._data).find("Style");
            var allPlacemarks = $(this._data).find("Placemark");
            var styles = [];
            var placemarks = [];
            if (params.length > 0) {
                var searchType = jQuery.cookie("searchtype");
                if (searchType==null || searchType == "") {
                    searchType = "name";
                    jQuery.cookie("searchtype",searchType);
                }
                if (searchType == "address"){
                	allPlacemarks.each(function (i, n) {
                        placemarks.push(allPlacemarks[i]);
                        styles.push(allStyles[i]);
                    });
                }
                else {
                    allPlacemarks.each(function (i, n) {
                        var name = findChildNodeText(n,"name").toLowerCase();  
                        if (name.indexOf(params.toLowerCase()) >= 0) {
                            placemarks.push(allPlacemarks[i]);
                            styles.push(allStyles[i]);
                        }
                    });
                }
                this.renderKml($(placemarks), $(styles));
            } else {
                this.renderKml(allPlacemarks, allStyles);
            }
        }
        MyMapToolsKit.prototype.renderKml = function (placemarks, styles) {
            this.clearMarkers();
            var map = this._map;
            var markers = this._markers;
            var toolsKit = this;
            placemarks.each(function (i, n) {
                var iconHref = findHref(styles.get(i));// $(styles.get(i)).find("IconStyle>Icon>href");
                //var coords = find(n,'Point>coordinates');// $(n).find("Point>coordinates");
                var coordinfos =findCoordinfos(n); // text(coords).split(",");
                var position = new google.maps.LatLng(coordinfos[1], coordinfos[0]);
                var description = findDescription(n);//$(n).find("description").text();
                var marker = new google.maps.Marker({ icon: text(iconHref), map: map, position: position });
                google.maps.event.addListener(marker, 'click', function(){
                	if(toolsKit._infowindow)
                	{
                		toolsKit._infowindow.close();
                    }
                	var infowindow = new google.maps.InfoWindow({
                	    content: description
                	});
                	infowindow.open(map,marker); 
                	toolsKit._infowindow = infowindow;            	
                });
                markers.push(marker);
            });
        }
        MyMapToolsKit.prototype.clearMarkers = function () {
            $(this._markers).each(function (i, n) {
                n.setMap(null);
            });
            this._markers.splice(0, jQuery(this._markers).size());
        }
        function loadXML(xmlText) {
            var xmlDoc;
            if (window.ActiveXObject) {
                xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
                xmlDoc.async = false;
                xmlDoc.loadXML(xmlText);
            }
            else if (DOMParser) {
                parser = new DOMParser();
                xmlDoc = parser.parseFromString(xmlText, "text/xml");
            }
            else {
                return null;
            }
            return xmlDoc;
        }
        function findHref(styleNode){
			if(window.ActiveXObject){
				return styleNode.childNodes[0].childNodes[0].childNodes[0];
			}
			else{
				return $(styleNode).find("IconStyle>Icon>href");
			}
        } 
        function findCoordinfos(placemark) {
			if(window.ActiveXObject){
				var value = "";
				$(placemark.childNodes).each(function(i,n){
					if(n.tagName =="Point"){
							value = n.childNodes[0].text;
							return;
						}
					});
				return value.split(',');
			}
			else{
				return $(placemark).find("Point>coordinates").text().split(',');
			}
        }
        function findDescription(placemark) {
			return findChildNodeText(placemark,'description');
        }
        function findChildNodeText(placemark,childNodeName) {
			if(window.ActiveXObject){
				var value = "";
				$(placemark.childNodes).each(function(i,n){
					if(n.tagName.toLowerCase() == childNodeName.toLowerCase()){
							value = n.text;
							return;
						}
					});
				return value;
			}
			else{
				return $(placemark).find(childNodeName).text();
			}
        }
        function text(xmlNode){
			if(window.ActiveXObject){
				return xmlNode.text;
			}
			else{
				return $(xmlNode).text();
			}
        }
    </script>
</body>
</html>
